<template>
  <div class="h-full">
    <a-card class="">
      <a-tabs v-model:active-key="activeTabs">
        <a-tab-pane :key="0" tab="HIS" />
        <a-tab-pane :key="1" tab="体检" />
      </a-tabs>
      <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
        <a-form ref="formRef" class="form-style-flex" :model="formState">
          <a-form-item name="pyjm" label="" class="w-80 mr-4">
            <a-input v-model:value="formState.pyjm" placeholder="项目名称/助记码/检验大类/检验项目" />
          </a-form-item>
          <a-form-item name="categroyCode" label="检验大类" class="w-80">
            <a-select v-model:value="formState.categroyCode" placeholder="请选择">
              <a-select-option v-for="item in categoryList" :key="item" :value="item.categroyCode">{{ item.categroyName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </SearchContainer>
    </a-card>
    <div class="flex my-2">
      <a-card class="flex-1 mr-2">
        <BaseTable
          fill
          :loading="loading"
          column-code="000193"
          row-key="bh"
          :data-source="tableData"
          bordered
          :pagination="pagination"
          :custom-row="onClickRow"
          :row-class-name="(record) => (record.bh === selectedKey ? 'selected-row cursor-pointer' : 'cursor-pointer')"
        >
          <template #bodyCell="{ column, index, record }">
            <template v-if="column.dataIndex === 'xh'">
              {{ index + 1 }}
            </template>
            <template v-if="column.dataIndex === 'status'">
              <a-tag :color="record.status === '未对照' ? 'red' : 'green'">{{ record.status }}</a-tag>
            </template>
            <template v-if="column.dataIndex === 'mc'">
              <!-- <MedicineInfo :value="{ mc: record?.mc, gg: record?.gg }" /> -->
              <DoctorAdviceOrder :row-data="record" :params-key="{ mc: 'mc', gg: 'gg' }" />
            </template>
          </template>
        </BaseTable>
      </a-card>
      <a-card class="w-[720px] overflow-auto">
        <div>待对照项目：{{ selectedName }}</div>
        <div class="my-2">
          <a-space>
            <!-- <a-select ref="select" v-model:value="categroyCode" class="w-52" placeholder="请选择" @change="onChangeCate">
              <a-select-option v-for="item in categoryList" :key="item" :value="item.categroyCode">{{ item.categroyName }}</a-select-option>
            </a-select> -->
            <a-select ref="select" v-model:value="instrumentId" class="w-52" placeholder="请选择" @change="getDataProject">
              <a-select-option v-for="item in instrumentList" :key="item" :value="item.id">{{ item.instrumentTypeName }}</a-select-option>
            </a-select>
          </a-space>
        </div>
        <div>
          <BaseTable
            fill
            :loading="loadingProject"
            column-code="000194"
            :data-source="tableDataProject"
            bordered
            row-key="itemCode"
            :row-selection="rowSelection"
            :extra-height="45"
          >
            <template #bodyCell="{ column, index }">
              <template v-if="column.dataIndex === 'xh'">
                {{ index + 1 }}
              </template>
            </template>
          </BaseTable>
          <div class="flex justify-end mt-3">
            <a-button class="mr-2" @click="onReset">重置</a-button>
            <a-button type="primary" @click="onClickCompare">对照</a-button>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'
import { post } from '@/utils/request'

const formRef = ref(null)
const activeTabs = ref(0)
const selectedKey = ref('')
const selectedName = ref('')
// const categroyCode = ref(null)
const instrumentId = ref(null)
const defaultCheckedKeys = ref([])
// const categoryList = ref([])
const instrumentList = ref([])
const formState = ref({})

const rowSelection = ref({
  checkStrictly: true,
  selectedRowKeys: defaultCheckedKeys,
  onChange: (selectedRowKeys) => {
    defaultCheckedKeys.value = selectedRowKeys
  }
})

const { loading, tableData, pagination, getData } = useTable({
  url: '/lis/LisSfxmfzb/getOrderItemAndLisCategroyList',
  params: formState.value,
  immediate: true,
  formatResult: (result) => {
    selectedKey.value = selectedKey.value || result[0]?.bh
    selectedName.value = selectedName.value || result[0]?.mc
    result.forEach((i) => (i.advOrderType = 0))
    return result
  }
})

const {
  loading: loadingProject,
  tableData: tableDataProject,
  getData: getDataProject
} = useTable({
  url: '/lis/LisSfxmfzb/getOrderItemAndLisItemList',
  formatParams: () => {
    return {
      instrumentTypeId: instrumentId.value || '',
      orderItemCode: selectedKey.value
    }
  },
  immediate: true,
  formatResult: (result) => {
    defaultCheckedKeys.value = result.map((i) => {
      if (i.chek === 1) return i.itemCode
    })
    return result
  }
})
// const getCategoryList = async () => {
//   // const { code, data, msg } = await post('/lis/InstrumentType/getLisCategoryList')
//   const { code, data, msg } = await post('/lis/InstrumentType/getLisCategroyList')
//   if (code !== 0) return message.error(msg)
//   categoryList.value = data
//   // categroyCode.value = categroyCode.value || data[0]?.categroyCode
//   getInstrumentTypeList()
// }

// 选择仪器
// const onSelectInst = () => {}

const getInstrumentTypeList = async () => {
  const { code, data, msg } = await post('/lis/InstrumentType/getInstrumentTypeList', {
    pageNum: 1,
    pageSize: 999,
    pyjm: ''
    // categoryCode: categroyCode.value
  })
  if (code !== 0) return message.error(msg)
  instrumentList.value = data
  instrumentId.value = data[0]?.id
  getDataProject()
}

const onClickRow = (row) => {
  return {
    onClick: () => {
      selectedKey.value = row?.bh
      selectedName.value = row?.mc
      row?.instrumentTypeId && (instrumentId.value = row?.instrumentTypeId)
      getDataProject()
    }
  }
}
// const onChangeCate = (val) => {
//   categroyCode.value = val
//   getInstrumentTypeList()
// }
// const onChangeCate = (val) => {
//   categroyCode.value = val
//   getInstrumentTypeList()
// }

const onClickCompare = async () => {
  if (!defaultCheckedKeys.value.length) return message.error('请选择项目')
  const { code, msg } = await post('/lis/LisSfxmfzb/doSaveLisRelation', {
    // categroyCode: categroyCode.value,
    instrumentTypeId: instrumentId.value,
    orderItemCode: selectedKey.value,
    lisOrderRelationList: defaultCheckedKeys.value
  })
  if (code !== 0) return message.error(msg)
  message.success(msg)
  getData()
}

const onReset = () => {
  selectedKey.value = ''
  selectedName.value = ''
  // categroyCode.value = ''
  getData()
}

// watch(
//   () => instrumentId.value,
//   () => {
//     getDataProject()
//   }
// )

onMounted(() => {
  getInstrumentTypeList()
})
</script>
